<template>
	<view class="cont">
		<view class="cont-baseinfo radius12 u-p-24 bg-white">
			<view class="title u-font-28 text-bold">【40个喷头和3吨水的大池】采购一台生物质热水锅炉采购一台生物质热水锅炉</view>
			<view class="date u-tips-color u-font-22 u-p-t-10 u-p-b-10 u-border-bottom">
				发布时间：2021-05-14 20:48
			</view>
			<view class="desc u-font-24 u-border-bottom">我这里是洗浴用的，采购一台生物质热水锅炉采购一台生物质热水锅炉采购一台生物质热水锅炉采购一台生物质热水锅炉</view>
			<view class="cont-title u-font-32 text-bold u-p-t-24">基本信息</view>
			<view class="u-flex u-col-center u-p-t-24 u-font-26">
				<view class="u-tips-color">采购人：</view>
				<view>王先生（辽宁省/大连市）</view>
			</view>
			<view class="u-flex u-col-center u-p-t-24 u-font-26">
				<view class="u-tips-color">联系方式：</view>
				<view class="text-success text-bold">159****1234</view>
			</view>
			<view class="u-flex u-col-center u-p-t-24">
				<u-line-progress 
					height="15"
					:active-color="infoColorError"
					:striped="true" 
					:percent="50" 
					:show-percent="false"
					:striped-active="true"></u-line-progress>
				<text class="u-m-l-20">1/2</text>
			</view>
			<view class="u-font-24 u-tips-color u-p-t-10">剩余0次接单机会；接单后可见联系方式</view>
			<u-button type="success" class="u-m-t-24">已达上限</u-button>
		</view>
		<view class="radius12 u-p-24 bg-white u-m-t-24">
			<view class="grade">
				<view class="text-error text-bold">该信息已满2个名额，无法再购买了</view>
				<view class="text-primary">
					<view>金牌V3会员</view>
					<view v-for="(item, index) in 2" :key="index">
						{{index + 1}}、比普通会员提前3分钟接收提醒
					</view>
				</view>
				<view class="u-p-l-40 u-p-r-40 u-p-b-30">
					<u-button type="error" shape="circle" :border="false" class="u-m-t-24 btn text-bold">立即开通</u-button>
				</view>
			</view>
		</view>
		<view class="radius12 bg-white u-m-t-24">
			<view class="cont-title u-p-24 u-font-32 text-bold">接单记录</view>
			<view class="u-flex u-p-t-20 u-p-b-50">
				<view class="u-flex-1 u-text-center">
					<view class="u-font-24 u-tips-color">接单人</view>
					<view class="u-font-28 u-p-t-16">欣欣***</view>
				</view>
				<view class="u-flex-1 u-text-center">
					<view class="u-font-24 u-tips-color">接单时间</view>
					<view class="u-font-28 u-p-t-16">05-13 20:29</view>
				</view>
				<view class="u-flex-1 u-text-center">
					<view class="u-font-24 u-tips-color">接单条数</view>
					<view class="u-font-28 u-p-t-16">2（买断）</view>
				</view>
			</view>
		</view>
		<view class="radius12 bg-white u-m-t-24">
			<view class="cont-title u-p-24 u-font-32 text-bold">最新可接单询盘</view>
			<view class="u-p-l-24 u-p-r-24">
				<view 
					class="item u-p-t-24 u-p-b-24"
					:class="{'u-border-top': index > 0}"
					v-for="(item, index) in 10"
					:key="index">
					<view class="item-top u-flex u-row-between u-col-center">
						<view class="u-line-1">需要跟地缘需要跟地缘需要跟地缘需要跟地缘</view>
						<view class="u-font-22 u-light-color">6分钟前</view>
					</view>
					<view class="u-font-22 u-m-t-14 u-flex u-row-between u-col-center text-success">
						<view>辽宁省/辽阳市</view>
						<view class="text-bold">1/3</view>
					</view>
				</view>
			</view>
		</view>
		<comTips />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
			}
		},
		onReady() {
			// 监听登录事件
			uni.$on(this.ENUM.EVENT_LOGIN_KEY, () => {
			})
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
@-webkit-keyframes scale {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.1);
	}
	50% {
		transform: scale(1);
	}
	75% {
		transform: scale(1.1);
	}
}
.cont {
	min-height: 100vh;
	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	&-baseinfo {
		.title {
			line-height: 48rpx;
		}
		.desc {
			line-height: 40rpx;
			padding: 20rpx 0;
		}
	}
}
.grade {
	line-height: 60rpx;
	.btn {
		height: 100rpx;
		color: #644102;
		background: linear-gradient(#fdee73, #fec50c);
		font-size: 40rpx;
		box-shadow: 0 14rpx 14rpx #f9620c;
		border: 0;
		-webkit-animation: scale 5s ease-in-out infinite;
		&.u-error-hover {
			background: linear-gradient(#fdee73, #fec50c) !important;
		}
	}
}
</style>
